<template>
	<view>
		<text>flex布局</text>

		<view>横向</view>
		<view class="box smart-row">
			<view class="smart-bg-red flex-item">A</view>
			<view class="smart-bg-green flex-item">B</view>
			<view class="smart-bg-blue flex-item">C</view>
		</view>

		<view>纵向</view>
		<view class="container smart-column">
			<view class="smart-bg-red flex-item-c">A</view>
			<view class="smart-bg-green flex-item-c">B</view>
			<view class="smart-bg-blue flex-item-c">C</view>
		</view>
		
		<view>其他</view>
		<view class="ontent">
			<view class="box1 flex-item-c">自动宽度</view>
			<view class="box2 flex-item-c">固定宽度</view>
			<view class="box3 smart-flex">
				<view class="smart-bg-red">居中1</view>
				<view class="smart-bg-green">居中2</view>
			</view>
			<view class="box4 smart-flex">
				<view class="small-center-box2 smart-bg-green">权重2</view>
				<view class="small-center-box1 smart-bg-red">权重1</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
		}
	}
</script>

<style>
	.box1 {
		background-color: aliceblue;
	}
	.box2 {
		background-color: beige;
		width: 500rpx;
	}
	.box3 {
		justify-content: center;
		gap: 20rpx;
		
		
		
		
	}
	.box4 {
		gap: 20rpx;
	}
	.small-center-box2 {
		flex: 2;
	}
	.small-center-box {
		flex: 1;
	}
</style>